<template>
  <view class="container-root">
    <view class="inner-wrap">
      <view class="logo-name">{{commonStore.setting?.siteName}}</view>
      <button class="btn oauth" open-type="getPhoneNumber" @getphonenumber="getphonenumber">快捷登录</button>
			<button class="btn phone" @click="handlePhoneLogin">手机号登录/注册</button>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { PhoneCodeLogin }  from '@/api/member'
import { useMemberStore } from '@/stores/member'
import { useCommonStore } from '@/stores/common'
const memberStore = useMemberStore()
const commonStore  = useCommonStore()
const getphonenumber = (res: any) => {
  if(res.detail.errMsg ===  "getPhoneNumber:ok" ){
    PhoneCodeLogin(res.detail.code).then((res:ResponseData<MemberToken>) => {
      if(res.success) {
        if(res.data)
        memberStore.setMemberToken(res.data)
        uni.navigateBack({delta: 1})
      } else if(res.msg) {
        return uni.showToast({
          title:  res.msg,
          icon: 'none'
        })
      }
    })
  }
}
const handlePhoneLogin = () => {
  uni.navigateTo({
    url: '/pages/user/login/login?loginType=phone'
  })
}
</script>

<style lang="scss" scoped>
.container-root{
		background-color: #fff;
		display:flex;
		align-items:center;
		flex-direction:column;
	}
	.inner-wrap {
		display:flex;
		flex: 1;
		padding-top:65rpx;
		align-items:center;
		flex-direction:column;
		min-height: 1060rpx;
		.logo{
			width:144rpx;
			height:144rpx;
			margin-bottom:20rpx;
		}
		.logo-name{
			padding:0 36rpx;
		}
	}
  .oauth{
		margin-top:163rpx;
		width:542rpx;
		height:88rpx;
		font-size:30rpx;
		border-radius:44rpx;
		background-color:#2EC100;
		color:#fff;
		line-height:88rpx;
		
		.iconfont{
			font-size:48rpx;
			color:#fff;
			vertical-align:middle;
			margin-right:16rpx;
		}
		&::after{
			display:none;
		}
	}
	.phone {
		margin-top:50rpx;
		width:542rpx;
		height:88rpx;
		font-size:30rpx;
		border-radius:44rpx;
		background-color:#EFF0F2;
		color:#969799;
		line-height:88rpx;
		
		.iconfont{
			font-size:48rpx;
			color:#C8C6C7;
			vertical-align:middle;
			margin-right:16rpx;
		}
		&::after{
			display:none;
		}
	}
</style>